23 tháng 8, 2025Tiếng Việt

Khám phá hook mới React experimental_useFormStatus để xử lý form nâng cao. Tìm hiểu về các tính năng, lợi ích, trường hợp sử dụng và cách triển khai qua ví dụ.

React experimental_useFormStatus: Hướng Dẫn Toàn Diện

Hệ sinh thái không ngừng phát triển của React liên tục giới thiệu các công cụ và API mới để cải thiện trải nghiệm của nhà phát triển và hiệu suất ứng dụng. Một trong những bổ sung như vậy, hiện đang trong giai đoạn thử nghiệm, là hook experimental_useFormStatus. Hook này cung cấp thông tin chi tiết có giá trị về trạng thái của việc gửi form, đặc biệt khi xử lý các hành động phía máy chủ (server actions). Hướng dẫn này đi sâu vào chi tiết của experimental_useFormStatus, khám phá chức năng, lợi ích và các ứng dụng thực tế của nó.

experimental_useFormStatus là gì?

Hook experimental_useFormStatus được thiết kế để cung cấp thông tin về trạng thái của một lần gửi form được khởi tạo bằng React Server Actions. Nó cho phép các component phản ứng với các giai đoạn khác nhau của quy trình gửi form, chẳng hạn như đang chờ xử lý, thành công hoặc thất bại. Điều này cho phép các nhà phát triển tạo ra trải nghiệm form phản hồi nhanh và thân thiện với người dùng hơn.

Về bản chất, nó thu hẹp khoảng cách giữa form phía máy khách và hành động phía máy chủ, cung cấp một cách rõ ràng và ngắn gọn để theo dõi và hiển thị trạng thái gửi form. Điều này đặc biệt hữu ích để cung cấp phản hồi trực quan cho người dùng, chẳng hạn như hiển thị chỉ báo tải, thông báo thành công hoặc thông báo lỗi.

Lợi ích chính khi sử dụng experimental_useFormStatus

Cải thiện Trải nghiệm Người dùng: Cung cấp phản hồi thời gian thực về trạng thái gửi form, giúp người dùng được thông báo và tương tác.
Đơn giản hóa Xử lý Form: Tinh giản quy trình quản lý việc gửi form, giảm mã lặp (boilerplate code).
Nâng cao Khả năng Truy cập: Cho phép các nhà phát triển tạo ra các form dễ truy cập hơn bằng cách cung cấp các cập nhật trạng thái có thể được truyền tải đến các công nghệ hỗ trợ.
Xử lý Lỗi Tốt hơn: Đơn giản hóa việc phát hiện và báo cáo lỗi, cho phép xác thực form và khắc phục lỗi mạnh mẽ hơn.
Code Sạch sẽ: Cung cấp một cách khai báo và ngắn gọn để quản lý trạng thái gửi form, giúp mã dễ đọc và bảo trì hơn.

Tìm hiểu cấu trúc của experimental_useFormStatus

Hook experimental_useFormStatus trả về một đối tượng chứa một số thuộc tính chính. Các thuộc tính này cung cấp thông tin có giá trị về trạng thái hiện tại của việc gửi form. Hãy xem xét chi tiết từng thuộc tính:

pending: Một giá trị boolean cho biết liệu việc gửi form có đang được tiến hành hay không. Điều này hữu ích để hiển thị chỉ báo tải.
data: Dữ liệu được trả về bởi server action khi gửi form thành công. Dữ liệu này có thể được sử dụng để cập nhật giao diện người dùng với kết quả của hành động.
error: Một đối tượng lỗi chứa thông tin về bất kỳ lỗi nào xảy ra trong quá trình gửi form. Đối tượng này có thể được sử dụng để hiển thị thông báo lỗi cho người dùng.
action: Hàm server action đã được sử dụng để gửi form. Điều này có thể hữu ích để kích hoạt lại hành động nếu cần.
formState: Trạng thái của form trước khi gửi. Nó cung cấp một bản ghi nhanh (snapshot) về dữ liệu mà form chứa trước khi quá trình gửi bắt đầu.

Ví dụ Sử dụng Cơ bản

Đây là một ví dụ cơ bản về cách sử dụng experimental_useFormStatus trong một component React:


import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function myAction(formData) {
  'use server'
  // Thực hiện logic phía máy chủ tại đây
  await new Promise(resolve => setTimeout(resolve, 2000)); // Mô phỏng một độ trễ

  const name = formData.get('name');

  if (!name) {
    return { message: 'Name is required.' };
  }

  return { message: `Hello, ${name}!` };
}

function MyForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      Name:
      
      
      {error && Error: {error.message}}
      {data && {data.message}}
    
  );
}

export default MyForm;

Trong ví dụ này, useFormStatus được sử dụng để theo dõi trạng thái của việc gửi form được khởi tạo bởi server action myAction. Thuộc tính pending được sử dụng để vô hiệu hóa input và button trong khi gửi, trong khi các thuộc tính data và error được sử dụng để hiển thị thông báo thành công và lỗi tương ứng.

Các Trường hợp Sử dụng Nâng cao

Ngoài việc theo dõi gửi form cơ bản, experimental_useFormStatus có thể được sử dụng trong các kịch bản nâng cao hơn. Dưới đây là một vài ví dụ:

1. Cập nhật Lạc quan (Optimistic Updates)

Cập nhật lạc quan liên quan đến việc cập nhật giao diện người dùng ngay lập tức sau khi người dùng gửi form, giả định rằng việc gửi sẽ thành công. Điều này có thể cải thiện hiệu suất cảm nhận của ứng dụng. experimental_useFormStatus có thể được sử dụng để hoàn tác cập nhật lạc quan nếu việc gửi form thất bại.


import { experimental_useFormStatus as useFormStatus } from 'react-dom';
import { useState } from 'react';

async function updateProfile(formData) {
  'use server'
  // Mô phỏng một độ trễ
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');

  if (!name) {
    return { success: false, message: 'Name is required.' };
  }

  return { success: true, message: `Profile updated for ${name}!` };
}

function ProfileForm({ initialName }) {
  const { pending, data, error } = useFormStatus();
  const [name, setName] = useState(initialName);

  const handleSubmit = async (e) => {
      e.preventDefault();

      // Cập nhật lạc quan
      setName(e.target.name.value);

      const formData = new FormData(e.target);
      const result = await updateProfile(formData);

      if (result && !result.success) {
          // Hoàn tác cập nhật lạc quan nếu gửi thất bại
          setName(initialName); // Hoàn tác về giá trị ban đầu
      }
  };

  return (
    
      Name:
       setName(e.target.value)} disabled={pending} />
      
      {error && Error: {error.message}}
      {data && data.success && {data.message}}
    
  );
}

export default ProfileForm;

2. Kết xuất có Điều kiện

experimental_useFormStatus có thể được sử dụng để kết xuất có điều kiện các phần tử giao diện người dùng khác nhau dựa trên trạng thái gửi form. Ví dụ, bạn có thể hiển thị một thông báo hoặc giao diện người dùng khác nhau dựa trên kết quả trả về của server action.


import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function processOrder(formData) {
  'use server'
  // Mô phỏng một độ trễ
  await new Promise(resolve => setTimeout(resolve, 2000));

  const orderId = Math.floor(Math.random() * 1000);

  return { orderId };
}

function OrderForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      
      {error && Error: {error.message}}
      {data && data.orderId && (
        
          Order placed successfully!
          Your order ID is: {data.orderId}
        
      )}
      {!pending && !data && !error && Ready to place your order.}
    
  );
}

export default OrderForm;

3. Các Lưu ý về Khả năng Truy cập

Khả năng truy cập là tối quan trọng trong phát triển web. Với experimental_useFormStatus, bạn có thể tăng cường đáng kể khả năng truy cập của form. Ví dụ, bạn có thể sử dụng các thuộc tính ARIA để thông báo cho trình đọc màn hình về trạng thái gửi form.


import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function submitComment(formData) {
  'use server'
  await new Promise(resolve => setTimeout(resolve, 2000));

  const commentText = formData.get('comment');

  if (!commentText) {
    return { message: 'Comment is required.' };
  }

  return { message: 'Comment submitted successfully!' };
}

function CommentForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      Comment:
      
      
      {error && Error: {error.message}}
      {data && {data.message}}
    
  );
}

export default CommentForm;

Trong đoạn mã này, aria-busy={pending} thông báo cho các công nghệ hỗ trợ khi form đang được gửi, và role="alert" và role="status" gắn nhãn thích hợp cho các thông báo lỗi và thành công tương ứng.

Các Lưu ý Toàn cầu và Thực tiễn Tốt nhất

Khi phát triển form cho đối tượng người dùng toàn cầu bằng experimental_useFormStatus, cần xem xét một số yếu tố để đảm bảo trải nghiệm người dùng liền mạch:

Bản địa hóa (Localization): Đảm bảo rằng tất cả các thông báo lỗi và thành công được bản địa hóa đúng cách cho các ngôn ngữ khác nhau. Điều này bao gồm việc dịch chính các thông báo, cũng như điều chỉnh định dạng thông báo cho phù hợp với quy ước của mỗi ngôn ngữ. Cân nhắc sử dụng các thư viện như i18next hoặc Context API tích hợp của React để quản lý bản dịch.
Định dạng Ngày và Giờ: Lưu ý đến các định dạng ngày và giờ khác nhau được sử dụng trên khắp thế giới. Sử dụng một thư viện như date-fns hoặc moment.js để định dạng ngày và giờ một cách thích hợp cho từng miền địa phương. Ví dụ, Mỹ sử dụng MM/DD/YYYY, trong khi nhiều nước châu Âu sử dụng DD/MM/YYYY.
Định dạng Số: Tương tự, định dạng số cũng khác nhau giữa các khu vực. Sử dụng API Intl.NumberFormat để định dạng số theo miền địa phương của người dùng. Điều này bao gồm việc xử lý dấu phân cách thập phân, dấu phân cách hàng nghìn và ký hiệu tiền tệ.
Xử lý Tiền tệ: Nếu form của bạn liên quan đến giao dịch tài chính, hãy đảm bảo rằng bạn đang xử lý tiền tệ một cách chính xác. Sử dụng một thư viện như currency.js để thực hiện các phép tính và chuyển đổi tiền tệ chính xác.
Khả năng Truy cập cho Người dùng Đa dạng: Đảm bảo tuân thủ các nguyên tắc về khả năng truy cập để đảm bảo form của bạn có thể sử dụng được bởi những người khuyết tật. Điều này bao gồm việc cung cấp các thuộc tính ARIA phù hợp, sử dụng HTML ngữ nghĩa và đảm bảo form có thể truy cập bằng bàn phím. Cân nhắc người dùng bị khiếm thị, khiếm thính, khác biệt về nhận thức và hạn chế về kỹ năng vận động.
Độ trễ Mạng: Nhận thức về các vấn đề tiềm ẩn về độ trễ mạng, đặc biệt đối với người dùng ở các khu vực có kết nối internet chậm hơn. Cung cấp phản hồi rõ ràng cho người dùng trong quá trình gửi form, chẳng hạn như chỉ báo tải hoặc thanh tiến trình.
Thông báo Lỗi Rõ ràng: Đảm bảo thông báo lỗi rõ ràng, ngắn gọn và có thể hành động, bất kể vị trí hay trình độ kỹ thuật của người dùng. Tránh sử dụng thuật ngữ kỹ thuật.
Quy tắc Xác thực: Bản địa hóa các quy tắc xác thực, chẳng hạn như định dạng mã bưu chính, định dạng số điện thoại và yêu cầu địa chỉ, để khớp với các quy ước dự kiến ở các khu vực khác nhau.

Tích hợp với các Thư viện của Bên thứ Ba

experimental_useFormStatus có thể được tích hợp liền mạch với các thư viện form của bên thứ ba khác nhau để nâng cao khả năng xử lý form. Dưới đây là một vài ví dụ:

Formik: Formik là một thư viện form phổ biến giúp đơn giản hóa việc quản lý trạng thái và xác thực form. Bằng cách kết hợp Formik với experimental_useFormStatus, bạn có thể dễ dàng theo dõi trạng thái gửi của các form và cung cấp phản hồi thời gian thực cho người dùng.
React Hook Form: React Hook Form là một thư viện form được sử dụng rộng rãi khác, cung cấp hiệu suất và tính linh hoạt tuyệt vời. Tích hợp React Hook Form với experimental_useFormStatus cho phép bạn quản lý việc gửi form và hiển thị các cập nhật trạng thái một cách sạch sẽ và hiệu quả.
Yup: Yup là một trình xây dựng schema để phân tích và xác thực giá trị. Yup có thể được sử dụng để định nghĩa các schema xác thực cho form của bạn, và experimental_useFormStatus có thể được sử dụng để hiển thị lỗi xác thực cho người dùng trong thời gian thực.

Để tích hợp với các thư viện này, bạn có thể truyền prop `action` vào component form hoặc hàm xử lý của thư viện, sau đó sử dụng `experimental_useFormStatus` trong các component liên quan cần hiển thị trạng thái gửi.

So sánh với các Phương pháp Thay thế

Trước khi có experimental_useFormStatus, các nhà phát triển thường dựa vào việc quản lý trạng thái thủ công hoặc các hook tùy chỉnh để theo dõi trạng thái gửi form. Những cách tiếp cận này có thể rườm rà và dễ gây lỗi. experimental_useFormStatus cung cấp một cách khai báo và ngắn gọn hơn để quản lý việc gửi form, giảm mã lặp và cải thiện khả năng đọc mã.

Các lựa chọn thay thế khác có thể bao gồm việc sử dụng các thư viện như `react-query` hoặc `swr` để quản lý các đột biến dữ liệu phía máy chủ (server-side data mutations), điều này có thể ngầm xử lý việc gửi form. Tuy nhiên, experimental_useFormStatus cung cấp một cách trực tiếp và tập trung vào React hơn để theo dõi trạng thái form, đặc biệt khi sử dụng React Server Actions.

Hạn chế và Lưu ý

Mặc dù experimental_useFormStatus mang lại những lợi ích đáng kể, điều quan trọng là phải nhận thức được những hạn chế và lưu ý của nó:

Trạng thái Thử nghiệm: Như tên gọi của nó, experimental_useFormStatus vẫn đang trong giai đoạn thử nghiệm. Điều này có nghĩa là API của nó có thể thay đổi trong tương lai.
Phụ thuộc vào Server Actions: Hook này được kết hợp chặt chẽ với React Server Actions. Nó không thể được sử dụng với các phương thức gửi form truyền thống phía máy khách.
Khả năng tương thích với Trình duyệt: Đảm bảo rằng các trình duyệt mục tiêu của bạn hỗ trợ các tính năng cần thiết cho React Server Actions và experimental_useFormStatus.

Kết luận

Hook experimental_useFormStatus là một sự bổ sung quý giá vào bộ công cụ của React để xây dựng các form mạnh mẽ và thân thiện với người dùng. Bằng cách cung cấp một cách khai báo và ngắn gọn để theo dõi trạng thái gửi form, nó đơn giản hóa việc xử lý form, cải thiện trải nghiệm người dùng và nâng cao khả năng truy cập. Mặc dù vẫn đang trong giai đoạn thử nghiệm, experimental_useFormStatus cho thấy nhiều hứa hẹn cho tương lai của việc phát triển form trong React. Khi hệ sinh thái React tiếp tục phát triển, việc nắm bắt các công cụ như vậy sẽ rất quan trọng để xây dựng các ứng dụng web hiện đại và hiệu suất cao.

Hãy nhớ luôn tham khảo tài liệu chính thức của React để có thông tin cập nhật nhất về experimental_useFormStatus và các tính năng thử nghiệm khác. Chúc bạn lập trình vui vẻ!